<!-- 新增员工组件 -->
<template>
  <div class="mypanel">
    <el-dialog title="编辑员工" :visible="dialogShow">
      <el-form :model="formInfo" label-width="80px" :rules="RuleformInfo" ref="RefformInfo">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="formInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="formInfo.mobile"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <!-- 有value-format控制时间格式 -->
          <el-date-picker v-model="formInfo.timeOfEntry" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <!--   -->
          <el-select v-model="formInfo.formOfEmployment" placeholder="请选择">
            <el-option v-for="item in hirtType" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="formInfo.workNumber" placeholder="1-20个字符"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <div class="dept">
            <el-input @focus="treeShow = true" v-model="formInfo.departmentName"></el-input>
            <!-- 为真才会显示这个tree-->
            <el-tree v-if="treeShow" class="mytree" :data="mydata" :props='myprops' default-expand-all
              :expand-on-click-node="false" @node-click="changeDept"></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker v-model="formInfo.correctionTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click='sub_btn' type="primary">提交</el-button>
        <el-button @click="close_btn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入聘用形式的数据
import employeesData from '@/api/constant/employees';
// 导入获取部门数据的接口
import { getDepListApi } from '@/api/departments'
import { addEmpAPi } from '@/api/employees'
export default {
  methods: {
    // 新增员工
    sub_btn () {
      // 全局验证
      this.$refs.RefformInfo.validate(async valid => {
        if (valid) {
          // 验证通过
          const res = await addEmpAPi(this.formInfo)
          // 关闭diaglog
          this.$emit('update:dialogShow', false)
          // 清空diaglog
          this.formInfo = {
            username: '',
            mobile: '',
            formOfEmployment: '',
            workNumber: '',
            departmentName: '',
            timeOfEntry: '',
            correctionTime: '',
          },
            // 清除校验效果
            this.$refs.RefformInfo.resetFields()
          // 告知用户提交成功
          this.$message.success('提交成功')
          // 刷新diaglog
          this.$emit('updateData')
        } else {
          // 验证失败
          this.$message.error('验证失败')
        }
      })

    },

    // 树形节点被点击  data参数获得当前节点
    changeDept (data) {
      this.formInfo.departmentName = data.name
      // 隐藏tree结构
      this.treeShow = false
    },
    close_btn () {
      this.$emit('update:dialogShow', false)
    },
    // 得到部门数据数据源
    async getDeptList () {
      const res = await getDepListApi()
      console.log(res.data)
      // 父级部门没有 pid  所以传 空值
      this.mydata = this.trunData(res.data.depts, '')
    },
    // 把并列结构数据转为嵌套结构 可以理解为一个递归遍历算法
    trunData (arr, pid) {
      // 创建空白数组
      const res = []
      // 接收到 res.data.depts 数组 作为参数 arr 传入  
      arr.forEach(item => {
        // 树形结构转换分析 暂时屏蔽
        // console.log('---这是进入循环pid')
        // console.log(pid)
        // console.log('---这是进入循环item.pid')
        // console.log(item.pid)
        // console.log('item项')
        // console.log(item)
        // 如果部门 当前数组第一项 pid 与 传入的pid相等 （第一次肯定都是父级 已知 父级没有 pid）
        if (item.pid === pid) {
          // 树形结构转换分析 暂时屏蔽
          // 执行 向其父级部门内部遍历 传入 res.data.depts 数组 和 第item.index (index 索引)个父级 id
          // -------递归------ 执行 开始
          // 得到 数组 和 数组当前父级的 id 在递归中变为 pid
          // console.log('当前级别pid------++----')
          // console.log(item.name)
          // console.log(item.pid)
          // console.log('其子级pid------++----')
          // console.log(pid)
          // console.log('我是当前数组')
          // console.log(arr)
          const children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
            console.log('--+--有子级')
          }
          res.push(item)
        }
      })
      return res
    }
  },
  // 此处父组件通过子组件标签传过来的值
  props: ['dialogShow'],
  data () {
    return {
      // form数据源
      formInfo: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: '',

      },
      // 校验数据 必须在form数据源中有具体变量名才能校验
      RuleformInfo: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'blur' }],
        workNumber: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        // 改用 change 解决 bug 因为如果是 blur 会导致如果一点击 input 在弹出 tree的同时 就会判断
        // 但此时确实没有选定数据，反而会报错。
        departmentName: [{ required: true, message: '请输入部门名称', trigger: 'change' }],
        timeOfEntry: [{ required: true, message: '请选择入职日期', trigger: 'blur' }],
        correctionTime: [{ required: true, message: '请输入转正日期', trigger: 'blur' }]

      },
      // 聘用形式的数据源
      hirtType: employeesData.hireType,
      // 部门列表数据源
      mydata: [],
      // 控制树状结构显示与隐藏
      treeShow: false,
      // 设置tree组件的配置
      myprops: {
        label: 'name'
      }
    }
  },

  //生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getDeptList()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.mypanel {

  // 实现下拉效果
  .dept {
    // 控制总下拉框大小
    // 子绝父相定位
    width: 300px;
    position: relative;

    .mytree {
      // 设置el-tree标签宽度等于 父标签（.dept类的）宽度  
      width: 100%;
      // 设置边框线
      border: 1px solid #ccc;
      position: absolute;
      // 绝对定位距离父级的左边0像素 （跟本层兄弟级input框对齐）
      // 距离父级的上边45像素
      left: 0;
      top: 45px;
      // 因为要实际效果是覆盖一层级显示
      z-index: 999;
    }
  }
}
</style>